<template>
	<view class="problem-container">
		<!-- 头部标题区域 -->
		<view class="header-section">
			<view class="header-content">
				<image :src="$IMG_URL('/static/newVersion/logo1.png')" mode="" class="header-icon"></image>
				<view class="header-text">
					<view class="title">常见问题</view>
					<view class="subtitle">为您解答使用中的疑问</view>
				</view>
			</view>
		</view>

		<!-- 搜索区域 -->
		<view class="search-section">
			<view class="search-box">
				<u-icon name="search" color="#999" size="16"></u-icon>
				<input class="search-input" placeholder="搜索问题关键词" v-model="searchKeyword" @input="filterProblems">
			</view>
		</view>

		<!-- 问题分类标签 -->
		<view class="category-section" v-if="categories.length > 0">
			<scroll-view scroll-x="true" class="category-scroll">
				<view class="category-item" :class="{ active: selectedCategory === '' }" @click="selectCategory('')">
					全部
				</view>
				<view class="category-item" v-for="category in categories" :key="category"
					:class="{ active: selectedCategory === category }" @click="selectCategory(category)">
					{{ category }}
				</view>
			</scroll-view>
		</view>

		<!-- 问题列表 -->
		<view class="content-section">
			<view class="problem-list">
				<view class="problem-card" v-for="(item, index) in filteredProblems" :key="index"
					@click="toggleProblem(index)">
					<view class="card-header">
						<view class="problem-number">{{ index + 1 }}</view>
						<view class="problem-title">{{ item.title }}</view>
						<view class="toggle-icon" :class="{ expanded: item.isExpanded }">
							<u-icon name="arrow-down" color="#73F0EA" size="16"></u-icon>
						</view>
					</view>
					<view class="card-content" v-if="item.isExpanded">
						<view class="content-wrapper" v-html="item.content"></view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="filteredProblems.length === 0">
				<u-icon name="search" color="#ccc" size="60"></u-icon>
				<view class="empty-text">暂未找到相关问题</view>
				<view class="empty-tip">试试其他关键词或查看全部问题</view>
			</view>
		</view>

		<!-- 底部联系区域 -->
		<!-- <view class="contact-section">
			<view class="contact-card">
				<view class="contact-header">
					<u-icon name="kefu-ermai" color="#73F0EA" size="20"></u-icon>
					<text class="contact-title">没找到答案？</text>
				</view>
				<view class="contact-desc">联系客服获得更多帮助</view>
				<view class="contact-btn" @click="contactService">
					联系客服
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		problem
	} from '@/api/common.js'
	export default {
		data() {
			return {
				problemList: [],
				filteredProblems: [],
				searchKeyword: '',
				selectedCategory: '',
				categories: [], // 问题分类
			}
		},
		methods: {
			// 切换问题展开/收起
			toggleProblem(index) {
				this.$set(this.filteredProblems[index], 'isExpanded', !this.filteredProblems[index].isExpanded);
			},

			// 获取问题数据
			getProblem() {
				problem().then(({
					data: res
				}) => {
					console.log('res', res);
					if (res.code == 1) {
						// 初始化数据
						this.problemList = res.data.map(item => ({
							...item,
							isExpanded: false,
							category: item.category || '常见问题' // 默认分类
						}));

						// 提取分类
						this.extractCategories();

						// 初始化过滤结果
						this.filteredProblems = [...this.problemList];
					}
				}).catch(error => {
					console.error('获取问题列表失败:', error);
					// 可以加上错误提示
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
				});
			},

			// 提取问题分类
			extractCategories() {
				const categorySet = new Set();
				this.problemList.forEach(item => {
					if (item.category) {
						categorySet.add(item.category);
					}
				});
				this.categories = Array.from(categorySet);
			},

			// 选择分类
			selectCategory(category) {
				this.selectedCategory = category;
				this.filterProblems();
			},

			// 过滤问题
			filterProblems() {
				let filtered = [...this.problemList];

				// 按分类过滤
				if (this.selectedCategory) {
					filtered = filtered.filter(item => item.category === this.selectedCategory);
				}

				// 按关键词搜索
				if (this.searchKeyword.trim()) {
					const keyword = this.searchKeyword.toLowerCase().trim();
					filtered = filtered.filter(item =>
						item.title.toLowerCase().includes(keyword) ||
						item.content.toLowerCase().includes(keyword)
					);
				}

				this.filteredProblems = filtered;
			},

			// 联系客服
			contactService() {
				// 这里可以按照项目需求调用客服系统
				uni.showModal({
					title: '联系客服',
					content: '请拨打客服电话：400-123-4567，或者在线咨询',
					confirmText: '立即联系',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							// 可以跳转到客服页面或拨打电话
							uni.makePhoneCall({
								phoneNumber: '400-123-4567'
							});
						}
					}
				});
			},
		},
		onLoad() {
			// 可以在这里处理页面参数
		},
		mounted() {
			this.getProblem();
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #73F0EA, rgba(255, 255, 255, 0.00));
		min-height: 100vh;
		position: relative;

		&::before {
			content: '';
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: 
				radial-gradient(circle at 20% 20%, rgba(115, 240, 234, 0.08) 0%, transparent 40%),
				radial-gradient(circle at 80% 80%, rgba(115, 240, 234, 0.06) 0%, transparent 40%);
			z-index: -1;
			pointer-events: none;
		}
	}

	.problem-container {
		padding-bottom: 40rpx;

		// 头部标题区域
		.header-section {
			background: linear-gradient(135deg, #73F0EA 0%, #5ee8e1 50%, rgba(255, 255, 255, 0.1) 100%);
			padding: 80rpx 40rpx 100rpx;
			border-radius: 0 0 50rpx 50rpx;
			box-shadow: 
				0 10rpx 30rpx rgba(115, 240, 234, 0.3),
				0 20rpx 60rpx rgba(115, 240, 234, 0.15);
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: -50%;
				right: -20%;
				width: 200rpx;
				height: 200rpx;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 50%;
				animation: float 6s ease-in-out infinite;
			}

			&::after {
				content: '';
				position: absolute;
				bottom: -30%;
				left: -10%;
				width: 150rpx;
				height: 150rpx;
				background: rgba(255, 255, 255, 0.08);
				border-radius: 50%;
				animation: float 8s ease-in-out infinite reverse;
			}

			.header-content {
				display: flex;
				align-items: center;
				color: white;

				.header-icon {
					margin-right: 24rpx;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));
					border-radius: 50%;
					width: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					backdrop-filter: blur(10rpx);
					border: 2rpx solid rgba(255, 255, 255, 0.3);
					box-shadow:
						0 8rpx 25rpx rgba(0, 0, 0, 0.1),
						inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
					animation: pulse 3s ease-in-out infinite;
				}

				.header-text {
					flex: 1;

					.title {
						font-size: 42rpx;
						font-weight: bold;
						margin-bottom: 12rpx;
						text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
						letter-spacing: 1rpx;
					}

					.subtitle {
						font-size: 28rpx;
						opacity: 0.95;
						text-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.15);
						letter-spacing: 0.5rpx;
					}
				}
			}
		}

		// 搜索区域
		.search-section {
			padding: 50rpx 40rpx;
			margin-top: -80rpx;
			z-index: 10;
			position: relative;

			.search-box {
				background: rgba(255, 255, 255, 0.9);
				border-radius: 60rpx;
				padding: 25rpx 35rpx;
				display: flex;
				align-items: center;
				box-shadow: 
					0 6rpx 20rpx rgba(115, 240, 234, 0.15),
					0 2rpx 8rpx rgba(0, 0, 0, 0.05);
				border: 2rpx solid rgba(115, 240, 234, 0.2);
				transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
				backdrop-filter: blur(10rpx);
				position: relative;
				overflow: hidden;

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: -100%;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, transparent, rgba(115, 240, 234, 0.1), transparent);
					transition: left 0.6s;
				}

				&:focus-within {
					border-color: #73F0EA;
					box-shadow:
						0 12rpx 40rpx rgba(115, 240, 234, 0.25),
						0 0 0 4rpx rgba(115, 240, 234, 0.1);
					transform: translateY(-2rpx);

					&::before {
						left: 100%;
					}
				}

				.search-input {
					flex: 1;
					margin-left: 20rpx;
					font-size: 30rpx;
					color: #333;
					border: none;
					outline: none;
					background: transparent;
					z-index: 2;
					position: relative;

					&::placeholder {
						color: #999;
						font-size: 28rpx;
					}
				}
			}
		}

		// 分类标签区域
		.category-section {
			padding: 0 40rpx 30rpx;

			.category-scroll {
				white-space: nowrap;
			}

			.category-item {
				display: inline-block;
				padding: 16rpx 32rpx;
				margin-right: 20rpx;
				background: white;
				border-radius: 40rpx;
				font-size: 26rpx;
				color: #666;
				border: 2rpx solid #f0f0f0;
				transition: all 0.3s ease;

				&.active {
					background: #73F0EA;
					color: white;
					border-color: #73F0EA;
					transform: scale(1.05);
				}

				&:last-child {
					margin-right: 40rpx;
				}
			}
		}

		// 内容区域
		.content-section {
			padding: 0 40rpx;

			.problem-list {
				.problem-card {
					background: white;
					border-radius: 20rpx;
					margin-bottom: 20rpx;
					box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.08);
					overflow: hidden;
					transition: all 0.3s ease;
					border: 2rpx solid transparent;

					&:hover {
						transform: translateY(-5rpx);
						box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.12);
						border-color: #73F0EA;
					}

					.card-header {
						padding: 30rpx;
						display: flex;
						align-items: center;
						cursor: pointer;
						transition: background-color 0.3s ease;

						&:active {
							background-color: #f8f9fa;
						}

						.problem-number {
							width: 60rpx;
							height: 60rpx;
							background: linear-gradient(135deg, #73F0EA, #5ee8e1);
							color: white;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 24rpx;
							font-weight: bold;
							margin-right: 24rpx;
							box-shadow: 0 3rpx 8rpx rgba(115, 240, 234, 0.3);
						}

						.problem-title {
							flex: 1;
							font-size: 30rpx;
							font-weight: 600;
							color: #333;
							line-height: 1.4;
						}

						.toggle-icon {
							transition: transform 0.3s ease;
							padding: 10rpx;
							border-radius: 50%;
							background: #f8f9fa;

							&.expanded {
								transform: rotate(180deg);
								// background: #73F0EA;

								::v-deep .u-icon {
									color: white !important;
								}
							}
						}
					}

					.card-content {
						padding: 0 30rpx 30rpx;
						border-top: 1rpx solid #f0f0f0;
						animation: slideDown 0.3s ease-out;

						.content-wrapper {
							padding: 30rpx 0 0;
							font-size: 28rpx;
							line-height: 1.6;
							color: #666;
							background: #f8f9fa;
							border-radius: 12rpx;
							padding: 30rpx;
							position: relative;

							&::before {
								content: '';
								position: absolute;
								left: 0;
								top: 0;
								width: 6rpx;
								height: 100%;
								background: #73F0EA;
								border-radius: 3rpx;
							}

							// 内容样式优化
							::v-deep {
								p {
									margin: 0 0 16rpx 0;
									line-height: 1.6;

									&:last-child {
										margin-bottom: 0;
									}
								}

								strong {
									color: #73F0EA;
									font-weight: 600;
								}

								a {
									color: #73F0EA;
									text-decoration: none;

									&:hover {
										text-decoration: underline;
									}
								}

								ul,
								ol {
									padding-left: 30rpx;
									margin: 16rpx 0;

									li {
										margin-bottom: 8rpx;
									}
								}
							}
						}
					}
				}
			}

			// 空状态
			.empty-state {
				text-align: center;
				padding: 100rpx 40rpx;
				color: #999;

				.empty-text {
					font-size: 32rpx;
					margin: 30rpx 0 16rpx;
					color: #666;
					font-weight: 500;
				}

				.empty-tip {
					font-size: 26rpx;
					color: #999;
					line-height: 1.4;
				}
			}
		}

		// 联系区域
		.contact-section {
			padding: 40rpx;

			.contact-card {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				border-radius: 20rpx;
				padding: 40rpx;
				color: white;
				text-align: center;
				box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3);

				.contact-header {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 16rpx;

					.contact-title {
						font-size: 32rpx;
						font-weight: 600;
						margin-left: 12rpx;
					}
				}

				.contact-desc {
					font-size: 26rpx;
					opacity: 0.9;
					margin-bottom: 30rpx;
					line-height: 1.4;
				}

				.contact-btn {
					background: rgba(255, 255, 255, 0.2);
					border: 2rpx solid rgba(255, 255, 255, 0.3);
					border-radius: 50rpx;
					padding: 20rpx 60rpx;
					font-size: 28rpx;
					font-weight: 600;
					color: white;
					transition: all 0.3s ease;
					display: inline-block;

					&:active {
						background: rgba(255, 255, 255, 0.3);
						transform: scale(0.98);
					}
				}
			}
		}
	}

	// 动画效果
	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-20rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes float {

		0%,
		100% {
			transform: translateY(0) rotate(0deg);
		}

		50% {
			transform: translateY(-20rpx) rotate(5deg);
		}
	}

	@keyframes pulse {

		0%,
		100% {
			box-shadow:
				0 8rpx 25rpx rgba(0, 0, 0, 0.1),
				inset 0 1rpx 0 rgba(255, 255, 255, 0.4);
		}

		50% {
			box-shadow:
				0 12rpx 35rpx rgba(0, 0, 0, 0.15),
				inset 0 1rpx 0 rgba(255, 255, 255, 0.6),
				0 0 20rpx rgba(115, 240, 234, 0.3);
		}
	}

	@keyframes shimmer {
		0% {
			background-position: -200% 0;
		}

		100% {
			background-position: 200% 0;
		}
	}
</style>